<template>
  <div style="padding: 10px 15px">
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        placeholder="请输入收款账户"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-if="this.user.cpnId == sy"
        v-model="form.cpnid"
        filterable
        clearable
        class="filter-item"
        placeholder="请选择企业"
        :filter-method="cpnmatch"
        @clear="cpnmatch"
      >
        <el-option
          v-for="item in cpnoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>
      <el-select
        v-model="form.paychannelid"
        clearable
        filterable
        class="filter-item"
        placeholder="请选择支付通道"
        style="width: 260px"
        @change="handlepaytyp"
        :filter-method="channelmatch"
        @clear="channelmatch"
      >
        <el-option
          v-for="item in paytychanneloptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>

      <el-select
        v-model="form.paytypeid"
        clearable
        class="filter-item"
        placeholder="请选择支付方式"
      >
        <el-option
          v-for="item in paytypeoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>
      <el-select
        v-model="check_form.trialStt"
        class="filter-item"
        placeholder="请选择审核状态"
        clearable
      >
        <el-option
          v-for="item in trialSttoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>
      <el-button
        class="filter-item seachbttn"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        class="filter-item seachbttn"
        type="primary"
        @click="clearilter"
      >
        清空
      </el-button>
    </div>
    <div
      class="filter_fenge"
      style="border: none; border-top: 1px solid #d1ddeb"
    />
    <div class="filter-container">
      <el-button
        v-if="Jurisdiction('添加')"
        class="filter-item bttnleft"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
        >新增</el-button
      >
      <el-button
        v-if="Jurisdiction('删除')"
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        @click="deleteClick()"
        >批量删除</el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-check"
        @click="EnableIsRc()"
        >启用对账</el-button
      >
      <el-button
        class="filter-item"
        type="danger"
        icon="el-icon-close"
        @click="DisableIsRc()"
        >禁用对账</el-button
      >
    </div>
    <!--table -->
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="cpnActCfgtableData"
      fit
      highlight-current-row
      style="width: 100%"
      :span-method="objectSpanMethod"
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" fixed="left" />
      <el-table-column label="企业名称" min-width="150px" align="left">
        <template slot-scope="{ row }">
          <span>{{ row.cpnIDStr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付通道" width="200px" align="left">
        <template slot-scope="{ row }">
          <span>{{ row.payChannelStr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" width="110px" align="left">
        <template slot-scope="{ row }">
          <span>{{ row.payTypStr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账户别名" min-width="300px" align="left">
        <template slot-scope="{ row }">
          <span>[{{ row.act }}]{{ row.alisNme }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应急账户" width="80px" align="left">
        <template slot-scope="{ row }">
          <span
            v-if="row.isEmrgncy"
            class="el-tag el-tag--success el-tag--medium el-tag--light"
            >{{ row.isEmrgncyStr }}</span
          >
          <span
            v-if="!row.isEmrgncy"
            class="el-tag el-tag--info el-tag--medium el-tag--light"
            >{{ row.isEmrgncyStr }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="是否对账" width="80px" align="left">
        <template slot-scope="{ row }">
          <span
            v-if="row.isRc"
            class="el-tag el-tag--success el-tag--medium el-tag--light"
            >{{ row.isRcStr }}</span
          >
          <span
            v-if="!row.isRc"
            class="el-tag el-tag--info el-tag--medium el-tag--light"
            >{{ row.isRcStr }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="审核" width="80px" align="left">
        <template slot-scope="{ row }">
          <span v-if="row.trialStt == 1" class="green">{{
            row.trialSttStr
          }}</span>
          <span v-if="row.trialStt == 2" class="red">{{
            row.trialSttStr
          }}</span>
          <span v-if="row.trialStt == 0">{{ row.trialSttStr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="110px" align="left">
        <template slot-scope="{ row }">
          <span>{{ row.dtStr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" width="110px" align="left">
        <template slot-scope="{ row }">
          <span>{{ row.operation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电子协议" width="128px" align="left">
        <template slot-scope="scope">
          <el-button
            v-if="
              scope.row.trialStt &&
              !scope.row.isEp &&
              scope.row.payChannel == '00047'
            "
            type="primary"
            size="mini"
            @click="ElectProtocol(scope.row)"
            >电子协议签署</el-button
          >
          <span
            v-if="scope.row.isEp && scope.row.payChannel == '00047'"
            class="green"
            >已签署</span
          >
        </template>
      </el-table-column>
      <!-- <el-table-column label="编辑/查看"  width="150px">
        <template slot-scope="scope">
          <el-button
            v-if="Jurisdiction('编辑')"
            type="primary"
            size="mini"
            @click="handleEditClick(scope.row)"
          >编辑</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleClick(scope.row)"
          >查看</el-button>
        </template>
      </el-table-column> -->

      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            v-if="Jurisdiction('编辑')"
            type="primary"
            size="mini"
            @click="handleEditClick(scope.row)"
            >编辑
          </el-button>
          <el-button type="primary" size="mini" @click="handleClick(scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="Jurisdiction('删除') && scope.row.trialStt != 0"
            type="danger"
            size="mini"
            @click="deleteClick(scope.row)"
            >删除</el-button
          >
        </template>

        <!-- <template slot-scope="scope">
          <el-button
            v-if="Jurisdiction('删除')&&scope.row.trialStt!=0"
            type="danger"
            size="mini"
            @click="deleteClick(scope.row)"
          >删除</el-button>
        </template> -->
      </el-table-column>
    </el-table>

    <pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData(this)"
    />

    <!--table-->
    <!--弹出层 模块-->
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="55%"
      :before-close="handleClose"
      :show-close="false"
      class="cpnactinfo_dialog"
    >
      <el-form :model="form" :inline="true" label-position="right">
        <el-steps :active="active" finish-status="success">
          <el-step title="填写支付配置信息" />
          <el-step title="选择功能与标签" />
          <el-step title="提交审核" />
        </el-steps>
        <!---->
        <div
          class="first"
          :class="{ divshow: divid == 0, divnone: divid != 0 }"
        >
          <div class="first_title">填写支付配置信息</div>
          <el-form-item
            label="企业"
            :rules="[{ required: true, message: '企业不能为空' }]"
          >
            <el-select
              v-model="form.cpnid"
              clearable
              filterable
              class="filter-item"
              :filter-method="cpnmatch"
              placeholder="请选择企业"
              @clear="cpnmatch"
            >
              <el-option
                v-for="item in cpnoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span v-html="item.label" />
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="支付通道"
            prop="paychannelid"
            :rules="[
              { required: true, message: '企业不能为空', trigger: 'change' },
            ]"
          >
            <el-select
              v-model="form.paychannelid"
              clearable
              filterable
              class="filter-item"
              placeholder="请选择支付通道"
              style="width: 300px"
              @change="handlepaytyp"
            >
              <el-option
                v-for="item in paytychanneloptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span v-html="item.label" />
              </el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item
            label="支持方式"
            :rules="[{ required: true, message: '支付方式不能为空' }]"
          />
          <br />
          <span
            class="notmes"
            :class="{ divshow: meshowpy, divnone: !meshowpy }"
            >暂无信息...</span
          >
          <el-checkbox-group v-model="form.checkpaytypeid">
            <el-checkbox
              v-for="item in paytypeoptions"
              :key="item.value"
              :label="item.value"
              @change="paytyrolechange($event, item.value)"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
          <br />
          <el-form-item label="渠道配置信息" />
          <br />
          <span class="notmes" :class="{ divshow: meshow, divnone: !meshow }"
            >暂无信息...</span
          >
          <div
            v-for="item in payconfig"
            :key="item.name"
            style="text-align: left"
            class="config-info"
          >
            <span class="msg">{{ item.name }}账户配置信息</span>

            <el-form-item
              v-for="domain in item.cfglist"
              v-if="domain.show"
              :key="domain.keyname"
              style="width: 100%; text-align: left"
              :label="
                domain.comment.length > 22
                  ? domain.comment.slice(0, 22) + '...'
                  : domain.comment
              "
              :prop="domain.keyname"
              label-width="100%"
            >
              <!-- 原代码 -->
              <!-- <el-input
                v-if="domain.show"
                v-model="domain.keyval"
                type="textarea"
                autosize
                style="width: 90%"
                @change="RegInput(domain.keyval,domain.comment)"
              />
              <el-tooltip placement="top" class="commenttop">
                <div slot="content">{{ domain.comment }}</div>
                <img src="@/assets/wen.png">
              </el-tooltip> -->

              <el-tabs
                v-model="activeName"
                @tab-click="tabSwitch"
                v-if="isJson(domain.keyval) == true"
              >
                <el-tab-pane label="开发模式" name="first">
                  <el-input
                    v-if="domain.show"
                    v-model="domain.keyval"
                    type="textarea"
                    autosize
                    style="width: 90%"
                    @change="RegInput(domain.keyval, domain.comment)"
                  />
                  <el-tooltip placement="top" class="commenttop">
                    <div slot="content">{{ domain.comment }}</div>
                    <img src="@/assets/wen.png" />
                  </el-tooltip>
                </el-tab-pane>
                <el-tab-pane
                  label="用户模式"
                  name="second"
                  style="overflow-x: auto"
                >
                  <el-form
                    :inline="true"
                    :model="item"
                    ref="inputBox"
                    class="demo-form-inline inputBox"
                    v-for="(item, index) in jsonData"
                    style="width: 100%"
                  >
                    <el-form-item
                      v-for="(val, key) in item"
                      style="
                        margin-right: 0px !important;
                        border: 1px solid rgb(239, 239, 239);
                      "
                    >
                      <div :class="{ white: index == 0 }" v-show="index == 0">
                        {{ key }}
                      </div>
                      <div style="background-color: #fff; height: 42px">
                        <el-input
                          v-model="item[key]"
                          :placeholder="key"
                          type="textarea"
                          :autosize="{ minRows: 1, maxRows: 1 }"
                          style="width: 90%; margin-left: 5%"
                          @blur="checkInput(item, index)"
                        ></el-input>
                      </div>
                    </el-form-item>
                    <el-form-item
                      style="
                        width: 120px;
                        text-align: center;
                        margin-right: 1px !important;
                        border: 1px solid rgb(239, 239, 239);
                      "
                    >
                      <div :class="{ white: index == 0 }" v-show="index == 0">
                        操作
                      </div>
                      <div style="height: 42px">
                        <i class="el-icon-plus" @click="add(item, index)"></i>
                        <span style="color: #e6e6e6; margin-left: 10px">|</span>
                        <i
                          class="el-icon-minus"
                          @click="delectData(item, index)"
                        ></i>
                      </div>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
              <el-input
                v-if="
                  isJson(domain.keyval) == false"
                v-model="domain.keyval"
                type="textarea"
                autosize
                style="width: 90%"
                @change="RegInput(domain.keyval, domain.comment)"
              />
            </el-form-item>
          </div>
        </div>
        <!--选择功能于标签-->
        <div :class="{ divshow: divid == 1, divnone: divid != 1 }">
          <div class="first_title">选择功能与标签</div>
          <div class="steptwo_left">
            <el-form-item label="是否启用对账">
              <el-form-item>
                <el-switch
                  v-model="form.IsRc"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :width="switchwidth"
                  title="启用对帐后,标识当前账户会进行支付对账操作,并且发送对账邮件到指定企业管理员邮箱"
                />
              </el-form-item>
            </el-form-item>
            <br />
            <el-form-item label="别名">
              <el-input v-model="form.AccountName" />
            </el-form-item>
            <br />
            <el-form-item label="交易类型">
              <el-checkbox-group
                v-model="form.payType"
                title="当前支付账户所属的交易类型"
              >
                <el-checkbox-button label="扫码支付" name="payType" />
                <el-checkbox-button label="APP" name="payType" />
                <el-checkbox-button label="H5" name="payType" />
                <el-checkbox-button label="JSAPI" name="payType" />
              </el-checkbox-group>
            </el-form-item>
            <br />
            <el-form-item label="账户">
              <el-radio-group v-model="form.ActTtyp">
                <el-radio-button label="未知" name="ActTtyp" />
                <el-radio-button label="对公" name="ActTtyp" />
                <el-radio-button label="对私" name="ActTtyp" />
              </el-radio-group>
            </el-form-item>
            <br />
            <el-form-item label="是否为应急账户">
              <el-form-item>
                <el-switch
                  v-model="form.IsEmrgncy"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :width="switchwidth"
                  title="启用应急账户后,支付平台可以在其他通道使用有故障时,一键切换到应急账户"
                />
              </el-form-item>
            </el-form-item>
          </div>
          <div class="steptwo_right">
            <div class="steptwo_cpn">{{ steptwo_cpn }}</div>
            <div class="steptwo_channel">{{ steptwo_channel }}</div>
            <div v-for="item in payconfig" :key="item.name">
              <div class="steptwo_cfg">{{ item.name }}配置信息</div>
              <div
                v-for="domain in item.cfglist"
                v-if="domain.show"
                :key="domain.keyname"
                class="steptwo_cfg_info"
                :label="domain.comment"
              >
                {{ domain.comment }}：{{ domain.keyval }}
              </div>
            </div>
          </div>
        </div>
        <!---->
        <div :class="{ divshow: divid == 2, divnone: divid != 2 }">
          <div class="first_title">预览</div>
          <div class="yulan">
            <div class="divinline">
              <div class="steptwo_cpn" style="float: left">
                {{ steptwo_cpn }}
              </div>
              <div style="float: right">
                <span
                  :class="{
                    green_emy: form.IsEmrgncy,
                    red_emy: !form.IsEmrgncy,
                  }"
                  >应急</span
                >
              </div>
            </div>
            <div class="steptwo_channel">{{ steptwo_channel }}</div>
            <div v-for="item in payconfig" :key="item.name">
              <div class="steptwo_cfg">{{ item.name }}配置信息</div>
              <div
                v-for="domain in item.cfglist"
                v-if="domain.show"
                :key="domain.keyname"
                class="steptwo_cfg_info"
                :label="domain.comment"
              >
                {{ domain.comment }}：{{ domain.keyval }}
              </div>
            </div>
            <div class="steptwo_cfg">账户别名：{{ form.AccountName }}</div>
            <div class="steptwo_cfg">交易类型：{{ form.payTypestr }}</div>
            <div class="steptwo_cfg">账户类型：{{ form.ActTtyp }}</div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="divid != 0" style="float: left" @click="prv"
          >上一步</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="active == 1" type="primary" @click="next"
          >提交审核</el-button
        >
        <el-button v-if="divid < 1" type="primary" @click="next"
          >下一步</el-button
        >
        <el-button v-if="divid == 2" type="primary" @click="saveForm"
          >确认提交</el-button
        >
      </div>
    </el-dialog>

    <!--详情-->
    <el-dialog title="详情" :visible.sync="dialogdetailsVisible" width="50%">
      <el-form :model="details_form" :inline="true" label-position="right">
        <el-form-item label="企业名称">
          <span v-html="details_form.cpnIDStr" />
        </el-form-item>
        <el-form-item label="支付方式">
          <span v-html="details_form.payTypStr" />
        </el-form-item>
        <el-form-item label="支付通道">
          <span v-html="details_form.payChannelStr" />
        </el-form-item>

        <div v-for="item in payconfig" :key="item.name">
          <el-form-item
            v-for="domain in item.cfglist"
            v-if="domain.show"
            :key="domain.keyname"
            style="width: 100%; text-align: left"
            :label="domain.comment"
            :prop="domain.keyname"
            label-width="100%"
          >
            <el-input
              v-if="domain.show"
              v-model="domain.keyval"
              type="textarea"
              autosize
              style="width: 100%; min-width: 200px"
            />
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogcheckVisible"
      width="55%"
      :before-close="handleClose"
      :show-close="false"
    >
      <el-form :model="details_form" :inline="true" label-position="right">
        <el-form-item label="企业名称">
          <span v-html="details_form.cpnIDStr" />
        </el-form-item>
        <el-form-item label="支付方式">
          <span v-html="details_form.payTypStr" />
        </el-form-item>
        <el-form-item label="支付通道">
          <span v-html="details_form.payChannelStr" />
        </el-form-item>
        <el-form-item
          v-for="domain in payconfig"
          v-if="domain.show"
          :key="domain.keyname"
          v-loading="listLoading"
          style="width: 100%"
          :label="domain.comment"
          :prop="domain.keyname"
          label-width="100%"
        >
          <el-input
            v-model="domain.keyval"
            style="width: 100%"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="check_form.trialStt" class="filter-item">
            <el-option
              v-for="item in trialSttoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span v-html="item.label" />
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcheckVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFormCheck">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="编辑"
      :visible.sync="dialogEditVisible"
      width="50%"
      :before-close="handleClose"
      :show-close="false"
    >
      <el-form :model="details_form" :inline="true" label-position="right" style="width:100%">
        <el-form-item label="企业名称">
          <span v-html="details_form.cpnIDStr" />
        </el-form-item>
        <el-form-item label="支付方式">
          <span v-html="details_form.payTypStr" />
        </el-form-item>
        <el-form-item label="支付通道">
          <span v-html="details_form.payChannelStr" />
        </el-form-item>
        <el-form-item label="别名">
          <el-input v-model="details_form.AccountName" />
        </el-form-item>
        <div
          v-for="item in payconfig"
          :key="item.name"
          style="text-align: left"
          class="config-info"
        >
          <span class="msg">{{ item.name }}账户配置信息</span>

          <el-form-item
            v-for="domain in item.cfglist"
            v-if="domain.show"
            :key="domain.keyname"
            style="width: 100%; text-align: left"
            :label="domain.comment"
            :prop="domain.keyname"
            label-width="100%"
          >
            <el-tabs
              v-model="activeName"
              @tab-click="tabSwitch"
              v-if="isJson(domain.keyval) == true"
            >
              <el-tab-pane label="开发模式" name="first">
                <el-input
                  v-if="domain.show"
                  v-model="domain.keyval"
                  type="textarea"
                  autosize
                  style="width: 100%"
                  @change="RegInput(domain.keyval, domain.comment)"
                />
              </el-tab-pane>
              <el-tab-pane
                label="用户模式"
                name="second"
                style="overflow-x: auto"
              >
                <el-form
                  :inline="true"
                  :model="item"
                  ref="inputBox"
                  class="demo-form-inline inputBox"
                  v-for="(item, index) in jsonData"
                  style="width:100%"
                >
                  <el-form-item
                    v-for="(val, key) in item"
                    style="
                      margin-right: 0px !important;
                      border: 1px solid rgb(239, 239, 239);
                    "
                  >
                    <div :class="{ white: index == 0 }" v-show="index == 0">
                      {{ key }}
                    </div>
                    <div style="background-color: #fff; height: 42px">
                      <el-input
                        v-model="item[key]"
                        :placeholder="key"
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 1 }"
                        style="width: 90%; margin-left: 5%"
                        @blur="checkInput(item, index)"
                      ></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item
                    style="
                      width: 120px;
                      text-align: center;
                      margin-right: 1px !important;
                      border: 1px solid rgb(239, 239, 239);
                    "
                  >
                    <div :class="{ white: index == 0 }" v-show="index == 0">
                      操作
                    </div>
                    <div style="height: 42px">
                      <i class="el-icon-plus" @click="add"></i>
                      <span style="color: #e6e6e6; margin-left: 10px">|</span>
                      <i
                        class="el-icon-minus"
                        @click="delectData(item, index)"
                      ></i>
                    </div>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <el-input
              v-if="isJson(domain.keyval) == false"
              v-model="domain.keyval"
              type="textarea"
              autosize
              style="width: 90%"
              @change="RegInput(domain.keyval, domain.comment)"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditCheck">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { AjaxToken } from "@/api/common";
import { SelectAjax } from "@/api/common";
import { Jurisdiction } from "@/api/common";
import sessionStorage from "@/api/Storage";
import PinYinMatch from "pinyin-match";
import "url-search-params-polyfill";
export default {
  name: "CpnActCfgInfo",
  components: {
    Pagination,
  },
  data() {
    return {
      jsonData: [],
      operationShow: false,
      company: "",
      activeName: "first",
      active: 0,
      divid: 0,
      switchwidth: 60,
      meshow: true,
      meshowpy: true,
      formLabelWidth: "120px",
      checked: false,
      user: null,
      sy: "system",
      payconfig: [],
      cpnoptions: [],
      cpnoptionspingying: [],
      steptwo_cpn: "",
      steptwo_channel: "",
      paytypeoptions: [],
      paytychanneloptions: [],
      trialSttoptions: [],
      cpnActCfgtableData: null,
      listQuery: {
        title: "",
        total: 0,
        page: 1,
        limit: 10,
      },
      listLoading: true,
      dialogFormVisible: false,
      dialogdetailsVisible: false,
      dialogcheckVisible: false,
      dialogEditVisible: false,
      dialogStatus: "",
      textMap: {
        update: "修改",
        create: "添加",
      },
      form: {
        act: "",
        cpnid: "",
        paytypeid: "",
        checkpaytypeid: [],
        paychannelid: "",
        Account: "",
        AccountName: " ",
        IsEmrgncy: false,
        IsRc: false, // 对账关闭
        payType: ["扫码支付"], // micropay 改为扫码支付
        payTypestr: "",
        ActTtyp: "未知",
      },
      details_form: {
        cpnIDStr: "",
        payTypStr: "",
        payChannelStr: "",
        AlisNme: "",
        cpnid: "",
        IsRc: true,
        AccountName: "",
      },
      check_form: {
        ID: "",
        trialStt: "",
      },
    };
  },
  created() {
    debugger;
    var user = JSON.parse(sessionStorage.getItem("userinfo"));
    this.user = user;
    this.fetchData();
    backstage.GeCpntListItems(this);
    backstage.GetEnum_TrialStt(this, false);
    backstage.GetPyChannelSelectListItems(this);
  },
  mounted() {
    this.errMsg = this.debounce(this.errMsg, 500);
  },
  watch: {
    payconfig: {
      handler: function (val, oldVal) {
        // console.log(val[0].cfglist);
        if (val.length > 0 && val[0].cfglist) {
          let arrIndex;
          for (var i = 0; i < val[0].cfglist.length; i++) {
            if (this.isJson(val[0].cfglist[i].keyval) == true) {
              arrIndex = i;
            }
          }
          try {
            let value = Object.keys(
              JSON.parse(val[0].cfglist[arrIndex].keyval)[0]
            );
            // console.log('value: ', value);
            if (
              JSON.parse(val[0].cfglist[arrIndex].keyval).length > 0 &&
              value.length > 0
            ) {
              this.jsonData = JSON.parse(val[0].cfglist[arrIndex].keyval);
            } else {
              this.jsonData = [];
            }
            // this.jsonData = JSON.parse(val[0].cfglist[arrIndex].keyval)
            // console.log('jsonData: ', this.jsonData);

            this.boxInit();
          } catch (error) {}
        }
      },
      deep: true,
    },
  },

  methods: {
    cpnmatch(val) {
      if (val) {
        let result = [];
        this.cpnoptions.forEach((item) => {
          let matchRes = PinYinMatch.match(item.label, val);
          if (matchRes) {
            result.push(item);
          }
        });
        this.cpnoptions = result;
      } else {
        this.cpnid = "";
        this.cpnoptions = backstage.GeCpntListItems(this);
      }
    },
    channelmatch(val) {
      if (val) {
        let result = [];
        this.paytychanneloptions.forEach((item) => {
          let matchRes = PinYinMatch.match(item.label, val);
          if (matchRes) {
            result.push(item);
          }
        });
        this.paytychanneloptions = result;
      } else {
        this.paytychanneloptions = backstage.GetPyChannelSelectListItems(this);
      }
    },
    /**
     * @desc 防抖函数
     * @param {需要防抖的函数} func
     * @param {延迟时间} wait
     * @param {是否立即执行} immediate
     */
    debounce(func, delay = 300, immediate = false) {
      let timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        if (immediate && !timer) {
          func.apply(this, arguments);
        }
        timer = setTimeout(() => {
          func.apply(this, arguments);
        }, delay);
      };
    },
    errMsg() {
      this.$message({
        message: "门店账户信息输入框key值不能为空!",
        duration: 2000,
        type: "error",
      });
    },
    // 选项卡
    tabSwitch(tab, event) {
      let arrIndex;

      for (var i = 0; i < this.payconfig[0].cfglist.length; i++) {
        if (this.isJson(this.payconfig[0].cfglist[i].keyval) == true) {
          arrIndex = i;
        }
      }
      // console.log(tab.index);
      if (tab.index == 0 && this.jsonData) {
        let s = this.jsonData[0];
        this.jsonData.forEach((item) => {
          for (const key in s) {
            if (item[key] == "") {
              this.errMsg();
            }
          }
        });

        // console.log('arrIndex: ', arrIndex);
        this.payconfig[0].cfglist[arrIndex].keyval = JSON.stringify(
          this.jsonData
        );
      } else if (tab.index == 1 && this.jsonData) {
        if (this.jsonData && this.jsonData.length <= 0) {
          this.jsonData = [];
        } else {
          this.jsonData = JSON.parse(
            this.payconfig[0].cfglist[arrIndex].keyval
          );
        }
      }
    },
    // 盒子宽度自适应
    boxInit() {
      this.$nextTick(() => {
        if (this.jsonData && this.jsonData.length > 0) {
          let len = Object.keys(this.jsonData[0]).length;
          if (len >= 2) {
            let w = (len - 2) * 180 + 480 + "px";
            // console.log('w: ', w);

            let box = document.getElementsByClassName("inputBox");
           
          }
        }
      });
    },
    add(item, index) {
      // console.log('index: ', index);
      // console.log('item: ', item);
      // console.log(Object.values(item));

      let tag = true;
      if (this.jsonData.length > 0) {
        this.jsonData.forEach((jsonItem, ind) => {
          // 检测输入框有无空值

          Object.values(jsonItem).forEach((val) => {
            // console.log('val: ', val);
            if (val == "" || val == undefined) {
              this.errMsg();
              tag = false;
            }
          });
        });

        if (tag == false) {
          return;
        }
        const s = this.jsonData[0];
        const box = {};
        for (const key in s) {
          box[key] = "";
        }
        this.jsonData.push(box);
        this.boxInit();
      } else {
        this.$message({
          message: "数据错误,请稍后重试",
          duration: 2000,
          type: "error",
        });
      }
    },
    delectData(item, index) {
      if (this.jsonData.length > 1) {
        this.jsonData.splice(index, 1);
      } else {
        this.$message({
          message: "不能再少了",
          duration: 2000,
          type: "error",
        });
      }
    },
    optionData(value) {
      let arr = value.match(/\d+/g);
      return arr;
    },
    numberData(keyval, comment) {
      debugger;
      let s = comment.match(/\d+/g);
      // console.log('s: ', s);
      // 输入框的值只有一个值，并且标题中有两个以及以上的可选项
      if (
        keyval.length == 1 &&
        s &&
        s.length >= 2 &&
        s.includes("0") &&
        s.includes("1")
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 判定是不是json
    isJson(val) {
      // console.log(val);
      if (val && val.indexOf("[") != -1) {
        try {
          return true;
        } catch (e) {
          return false;
        }
      }

      return false;
    },
    checkInput(item, index) {
      // console.log('item: ', item);
      // console.log(index);

      var s = Object.keys(item);
      var res;

      [this.jsonData[index]].forEach((Jsonitem) => {
        for (const key in this.jsonData[0]) {
          if (Jsonitem[key]) {
            Jsonitem[key] = Jsonitem[key].trim();
          }
        }
      });
      let tag = false;

      s.forEach((val, ind) => {
        //  输入框中存在空格值

        var judgeFn = new RegExp(/\s+/g);
        if (
          this.jsonData[index][val] &&
          judgeFn.test(this.jsonData[index][val]) &&
          this.jsonData[index][val] != ""
        ) {
          // console.log('this.jsonData[index][val]: ', this.jsonData[index][val]);
          let a = this.jsonData[index][val].replace(/\s/g, ",");
          // console.log(a);
          res = a.split(",");
          // console.log('res: ', res);
          if (res.length > 0) {
            res.forEach((resItem, j) => {
              if (resItem == "") {
                res.splice(j, 1);
              }
            });
          }
          tag = true;
        }
      });
      // 原单行操作代码
      // s.forEach((val, ind) => {
      //   if (res && tag) {
      //     this.jsonData[index][val] = res[ind]
      //   }
      // })

      // 检测是否存在多行复制文本
      if (res && tag) {
        // 判断粘贴数据是否超过一行对应数，来对应生成表格
        let count =
          Math.ceil(res.length / s.length) - this.jsonData.length + index;
        // console.log('count: ', count);

        for (var i = 0; i < count; i++) {
          const s = this.jsonData[0];
          const box = {};
          for (const key in s) {
            box[key] = "";
          }
          this.jsonData.push(box);
          this.boxInit();
        }
        // 设置num在于需要在遍历时让数组里面的数据对应每一个key
        var num = 0;
        // 添加多行或者一行数据需要时间，所以设置定时器

        // 直接for循环遍历，每次检测一行数据，如果数据超过一行对应数，则把数据拆分成多行  如果不超过，则把数据拆分成一行
        // 同时i 为传递来的index 从index进行遍历逐渐+1，然后逐渐对应相应数据即可
        setTimeout(() => {
          // 加上index在于途中可能会再次操作多个数据遍历
          for (
            var j = index;
            j < Math.ceil(res.length / s.length) + index;
            j++
          ) {
            s.forEach((val, ind) => {
              if (res && tag) {
                let k = num + ind;
                // console.log('k: ', k);
                if (k < s.length * this.jsonData.length) {
                  this.jsonData[j][val] = res[k];
                }
              }
            });
            num += s.length;
          }
        }, 300);
      }
    },

    paytyrolechange(e, id) {
      this.meshow = false;
      var payType = id;
      if (this.form.paychannelid != "00001") {
        // 非西联直连
        payType = this.form.paychannelid;
      }
      if (e) {
        this.DownConfig(id);
      } else {
        var newpaycfg = [];
        var istrue = false;
        if (
          this.form.paychannelid == "00001" ||
          this.form.checkpaytypeid.length <= 0
        ) {
          this.payconfig.forEach((element) => {
            if (payType != element.paytypeid) {
              newpaycfg.push(element);
            }
          });
          istrue = true;
        }
        if (istrue) {
          this.payconfig = newpaycfg;
        }
      }
      // console.log(' this.payconfig: ', this.payconfig);
    },
    RegInput(res, comment) {
      //  老版本字母数字验证
      // console.log(comment);
      // console.log(res);
      // const reg = /^[A-Za-z0-9]+$/
      // if(!reg.test(res)){
      //   this.$message({
      //       message: comment+'输入格式不正确',
      //       duration:2000,
      //       type: 'error'
      //     })
      // }
    },
    prv() {
      this.active = this.active - 1;
      this.divid = this.active;
    },
    next() {
      let arrIndex;

      for (var i = 0; i < this.payconfig[0].cfglist.length; i++) {
        if (this.isJson(this.payconfig[0].cfglist[i].keyval) == true) {
          arrIndex = i;
        }
      }
      // 如果有多门店里面输入框为空数组，那么清空jsonData数组
      if (arrIndex) {
        if (
          JSON.parse(this.payconfig[0].cfglist[arrIndex].keyval).length == 0
        ) {
          this.jsonData = [];
        }
      }

      var switchTag = true;
      //  点击下一步时检测多门店是否有空值,如果有多门店则检测有无空值，如果没有直接放行
      // console.log('this.jsonData: ', this.jsonData);
      if (this.jsonData && this.jsonData.length > 0 && arrIndex) {
        let s = this.jsonData[0];
        // console.log('s: ', s);
        this.jsonData.forEach((item) => {
          for (const key in s) {
            if (item[key] == undefined) {
              item[key] = "";
              switchTag = false;
            }
            if (item[key] == "" || item[key] == undefined) {
              this.errMsg();
              switchTag = false;
            }
          }
        });
        this.payconfig[0].cfglist[arrIndex].keyval = JSON.stringify(
          this.jsonData
        );
      }
      if (switchTag == false) {
        return;
      }
      // console.log(this.jsonData);

      if (this.form.cpnid == "") {
        this.$message({
          showClose: true,
          message: "请选择企业",
          type: "error",
        });
        return;
      } else if (this.form.checkpaytypeid.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择支付方式",
          type: "error",
        });
        return;
      } else if (this.form.paychannelid == "") {
        this.$message({
          showClose: true,
          message: "请选择支付通道",
          type: "error",
        });
        return;
      }
      if (this.tag == false) {
        return;
      }
      if (this.payconfig.length <= 0) {
        this.$message({
          showClose: true,
          message: "请先获取配置,填写完成后提交",
          type: "error",
        });
        return;
      }

      var iserror = false;
      var message = "";
      this.payconfig.forEach((element) => {
        if (message == "") {
          if (element.cfglist[0].keyval == "") {
            message = "请填写" + element.cfglist[0].comment + "";
            iserror = true;
          }
        }
      });
      if (iserror) {
        this.$message({
          showClose: true,
          message: message,
          type: "error",
        });
        return;
      }
      if (this.active++ > 2) {
        this.active = 0;
      }
      this.divid = this.active;
      // 获取已选账户信息
      if (this.active == 1) {
        var params = new URLSearchParams();
        params.append("cpnid", this.form.cpnid);
        params.append("checkpaytypeid", this.form.checkpaytypeid);
        params.append("paychannelid", this.form.paychannelid);
        backstage.GetPayConfigInfoCheck(this, params);
      }
      if (this.active == 2) {
        this.form.payTypestr = this.form.payType.toString();
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 10 || columnIndex == 11) {
        if (row.span > 0) {
          return {
            rowspan: row.span,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    handleClose() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    Jurisdiction(moduleActionName) {
      return Jurisdiction(moduleActionName, this);
    },
    Jurisdiction2(moduleActionName, stt) {
      if (stt == 0) {
        return Jurisdiction(moduleActionName, this);
      }
    },
    handleEditClick(row) {
      var params = new URLSearchParams();
      params.append("id", row.id);
      params.append("isedit", true);
      this.payconfig = [];
      this.details_form.IsRc = row.isRc;
      this.details_form.cpnid = row.id;
      this.details_form.cpnIDStr = row.cpnIDStr;
      this.details_form.payChannelStr = row.payChannelStr;
      this.details_form.payTypStr = row.payTypStr;
      this.details_form.AccountName = row.alisNme;
      backstage.GetPayConfigInfo(this, params);
      this.dialogEditVisible = true;
    },
    handlepaytyp() {
      this.meshowpy = false;
      this.payconfig = []; // 清空已选择的账户配置
      this.form.checkpaytypeid = [];
      this.paytypeoptions = [];
      if (this.form.paychannelid != "") {
        backstage.GetPayTypeList(this);
      } else {
        this.meshowpy = true;
      }
    },
    saveEditCheck() {
      let arrIndex;

      for (var i = 0; i < this.payconfig[0].cfglist.length; i++) {
        if (this.isJson(this.payconfig[0].cfglist[i].keyval) == true) {
          arrIndex = i;
        }
      }

      var switchTag = true;
      //  点击下一步时检测多门店是否有空值,如果有多门店则检测有无空值，如果没有直接放行
      if (this.jsonData.length > 0 && arrIndex) {
        let s = this.jsonData[0];

        this.jsonData.forEach((item) => {
          for (const key in s) {
            if (item[key] == "") {
              this.errMsg();
              switchTag = false;
            }
          }
        });
        this.payconfig[0].cfglist[arrIndex].keyval = JSON.stringify(
          this.jsonData
        );
        // console.log(this.payconfig);
      }
      if (switchTag == false) {
        return;
      }

      var params = new URLSearchParams();
      params.append("IsRc", this.details_form.IsRc);
      params.append("ID", this.details_form.cpnid);
      params.append("PayconfigDTO", JSON.stringify(this.payconfig));
      params.append("Account", this.payconfig[0].keyval);
      params.append("ActTtyp", this.form.ActTtyp);
      params.append("AccountName", this.details_form.AccountName);

      this.$prompt("", "请输入修改原因", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "filter-container",
            background: "rgba(0, 0, 0, 0.7)",
          });
          params.append("operation", value);
          backstage.AddCpnActCfgInfo(this, params, loading);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消编辑",
          });
        });
    },
    saveFormCheck() {
      var params = new URLSearchParams();
      params.append("ID", this.check_form.ID);
      params.append("trialStt", this.check_form.trialStt);
      backstage.SaveCheckAct(this, params);
    },
    CheckAct(row) {
      this.check_form.ID = row.id;
      backstage.GetEnum_TrialStt(this, false);
      var params = new URLSearchParams();
      params.append("id", row.id);
      params.append("isedit", true);
      this.details_form.cpnIDStr = row.cpnIDStr;
      this.details_form.payChannelStr = row.payChannelStr;
      this.details_form.payTypStr = row.payTypStr;
      backstage.GetPayConfigInfo(this, params);
      this.dialogcheckVisible = true;
    },
    handleFilter(row) {
      this.listQuery.page = 1;
      this.fetchData();
    },
    clearilter(row) {
      this.listQuery.page = 1;
      this.listQuery.title="";
       this.form=  {
        act: "",
        cpnid: "",
        paytypeid: "",
        checkpaytypeid: [],
        paychannelid: "",
        Account: "",
        AccountName: " ",
        IsEmrgncy: false,
        IsRc: false, // 对账关闭
        payType: ["扫码支付"], // micropay 改为扫码支付
        payTypestr: "",
        ActTtyp: "未知",
      };
       this.fetchData();
    },
    
    handleCreate() {
      // 清空多门店数据
      let arrIndex;
      if (this.payconfig.length > 0) {
        for (var i = 0; i < this.payconfig[0].cfglist.length; i++) {
          if (this.isJson(this.payconfig[0].cfglist[i].keyval) == true) {
            arrIndex = i;
          }
        }
      }

      if (this.jsonData.length > 0 && arrIndex) {
        // let s = this.jsonData[0]
        this.jsonData = [];

        // this.jsonData.forEach(item => {
        //   for (const key in s) {
        //     item[key] = ""
        //   }
        // })
        // console.log('this.jsonData: ', this.jsonData);
        this.payconfig[0].cfglist[arrIndex].keyval = JSON.stringify(
          this.jsonData
        );
        // console.log(this.payconfig);
      }

      this.dialogStatus = "create";
      this.payconfig = [];

      this.form.checkpaytypeid = [];
      this.active = 0;
      this.divid = 0;
      this.dialogFormVisible = true;
      backstage.GeCpntListItems(this);
      backstage.GetPyChannelSelectListItems(this);
    },
    handleClick(row) {
      var params = new URLSearchParams();
      params.append("id", row.id);
      params.append("isedit", true);
      this.payconfig = [];
      this.details_form.cpnIDStr = row.cpnIDStr;
      this.details_form.payChannelStr = row.payChannelStr;
      this.details_form.payTypStr = row.payTypStr;
      backstage.GetPayConfigInfo(this, params);
      this.dialogdetailsVisible = true;
    },
    ElectProtocol(row) {
      var params = new URLSearchParams();
      params.append("ID", row.id);
      this.$confirm("确认签署协议吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      })
        .then((a) => {
          this.listLoading = true;
          backstage.ElectProtocol(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 下载配置文件
    DownConfig(payType) {
      if (this.payconfig.length <= 0 || this.form.paychannelid == "00001") {
        if (this.form.cpnid == "") {
          this.$message({
            showClose: true,
            message: "请选择企业",
            type: "error",
          });
          return;
        } else if (payType == "") {
          this.$message({
            showClose: true,
            message: "请选择支付方式",
            type: "error",
          });
          return;
        } else if (this.form.paychannelid == "") {
          this.$message({
            showClose: true,
            message: "请选择支付通道",
            type: "error",
          });
          return;
        }
        if (this.form.paychannelid != "00001") {
          // 非西联直连
          payType = this.form.paychannelid;
        }
        var params = new URLSearchParams();
        params.append("paytype", payType);
        backstage.GetPayConfigInfo(this, params);
      }
    },
    saveForm() {
      if (this.form.cpnid == "") {
        this.$message({
          showClose: true,
          message: "请选择企业",
          type: "error",
        });
        return;
      } else if (this.form.checkpaytypeid.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择支付方式",
          type: "error",
        });
        return;
      } else if (this.form.paychannelid == "") {
        this.$message({
          showClose: true,
          message: "请选择支付通道",
          type: "error",
        });
        return;
      }
      if (this.payconfig.length <= 0) {
        this.$message({
          showClose: true,
          message: "请先获取配置,填写完成后提交",
          type: "error",
        });
        return;
      }
      var iserror = false;
      var message = "";
      this.payconfig.forEach((element) => {
        if (message == "") {
          if (element.cfglist[0].keyval == "") {
            message = "请填写" + element.cfglist[0].comment + "";
            iserror = true;
          }
        }
      });
      if (iserror) {
        this.$message({
          showClose: true,
          message: message,
          type: "error",
        });
        return;
      }
      var params = new URLSearchParams();
      params.append("CpnID", this.form.cpnid);
      params.append("selectpaytype", this.form.checkpaytypeid);
      params.append("selectpaychannel", this.form.paychannelid);
      params.append("Account", this.payconfig[0].keyval);
      params.append("AccountName", this.form.AccountName);
      params.append("IsEmrgncy", this.form.IsEmrgncy);
      params.append("IsRc", this.form.IsRc);
      params.append("PayconfigDTO", JSON.stringify(this.payconfig));
      params.append("payTypes", this.form.payType);
      params.append("ActTtyp", this.form.ActTtyp);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "filter-container",
        background: "rgba(0, 0, 0, 0.7)",
      });
      backstage.AddCpnActCfgInfo(this, params, loading);
    },
    fetchData() {
      this.listLoading = true;
      // 搜索
      var params = new URLSearchParams();
      params.append(
        "Parms",
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          "}"
      );
      params.append("Act", this.listQuery.title);

      params.append(
        "CpnID",
        this.form.cpnid == "" ? this.user.cpnId : this.form.cpnid
      );
      params.append("PyTypID", this.form.paytypeid);
      params.append("PyChnlID", this.form.paychannelid);
      params.append("TrialStt", this.check_form.trialStt);

      backstage.GetCpnActCfgInfoList(this, params);
    },
    deleteClick(row) {
      var multis = [];
      var params = new URLSearchParams();
      if (row == undefined || row == "") {
        var arr = this.multipleSelection;
        if (arr == undefined || arr.length <= 0) {
          this.$message({
            showClose: true,
            message: "请至少选中一行",
            type: "error",
          });
          return;
        } else {
          for (var i = 0; i < arr.length; i++) {
            multis.push(arr[i].id);
          }
          params.append("delds", JSON.stringify(multis));
        }
      } else {
        multis.push(row.id);
        params.append("delds", JSON.stringify(multis));
      }
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then((a) => {
          this.listLoading = true;
          backstage.DelCpnActCfgInfo(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    EnableIsRc() {
      var multis = [];
      var params = new URLSearchParams();
      var arr = this.multipleSelection;
      if (arr == undefined || arr.length <= 0) {
        this.$message({
          showClose: true,
          message: "请至少选中一行",
          type: "error",
        });
        return;
      } else {
        for (var i = 0; i < arr.length; i++) {
          multis.push(arr[i].id);
        }
        params.append("delds", JSON.stringify(multis));
      }
      this.$confirm("确认启用对账吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      })
        .then((a) => {
          this.listLoading = true;
          backstage.EnableIsRc(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    DisableIsRc() {
      var multis = [];
      var params = new URLSearchParams();
      var arr = this.multipleSelection;
      if (arr == undefined || arr.length <= 0) {
        this.$message({
          showClose: true,
          message: "请至少选中一行",
          type: "error",
        });
        return;
      } else {
        for (var i = 0; i < arr.length; i++) {
          multis.push(arr[i].id);
        }
        params.append("delds", JSON.stringify(multis));
      }
      this.$confirm("确认禁用对账吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then((a) => {
          this.listLoading = true;
          backstage.DisableIsRc(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
// 后台事件
var backstage = {
  // 获取账户集合
  GetCpnActCfgInfoList: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetCpnActCfgInfoList",
      params,
      "post",
      function (res) {
        thisobj.listLoading = false;
        var body = res.data.data;
        thisobj.cpnActCfgtableData = body.rows;
        thisobj.listQuery.page = body.page;
        thisobj.listQuery.total = body.records;
      },
      function (err) {}
    );
  },
  // 获取账户集合
  GetPayConfigInfoCheck: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetPayConfigInfoCheck",
      params,
      "post",
      function (res) {
        thisobj.listLoading = false;
        var body = res.data.data;
        thisobj.steptwo_cpn = body.cpnname;
        thisobj.steptwo_channel = body.checkname;
      },
      function (err) {}
    );
  },
  GeCpntListItems: function (thisobj) {
    SelectAjax(
      "GeCpntListItems?val=" + thisobj.cpnid + "",
      function (response) {
        // console.log(response);
        var body = response.data;
        thisobj.cpnoptions = [];
        body.data.forEach((element) => {
          thisobj.cpnoptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetPayTypeList: function (thisobj) {
    SelectAjax(
      "GetPayTypeList?val=&pychanelid=" + thisobj.form.paychannelid,
      function (response) {
        var body = response.data;
        thisobj.paytypeoptions = [];
        body.data.forEach((element) => {
          thisobj.paytypeoptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetPyChannelSelectListItems: function (thisobj) {
    SelectAjax(
      "GetPyChannelSelectListItems?val=",
      function (response) {
        // console.log(response);
        var body = response.data;
        thisobj.paytychanneloptions = [];
        body.data.forEach((element) => {
          thisobj.paytychanneloptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetPayConfigInfo: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetPayConfigInfo",
      params,
      "post",
      function (res) {
        // console.log(res)
        thisobj.listLoading = false;
        var body = res.data.data;
        if (body.cfglist == undefined || body.cfglist == null) {
          thisobj.$message({
            showClose: true,
            message:
              "当前所选支付方式暂无相关配置,请联系系统管理员处理后在尝试添加",
            type: "warning",
            duration: 3000,
          });
        } else {
          thisobj.payconfig.push(body);
        }
      },
      function (err) {}
    );
  },
  AddCpnActCfgInfo: function (thisobj, params, loading) {
    AjaxToken(
      thisobj,
      "AddCpnActCfgInfo",
      params,
      "post",
      function (res) {
        loading.close();
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
          thisobj.dialogEditVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
  GetEnum_TrialStt: function (thisobj, isEmpty) {
    SelectAjax(
      "GetEnum_TrialStt?isEmpty=" + isEmpty + "+&code=0",
      function (response) {
        var body = response.data;

        thisobj.trialSttoptions = [];
        body.data.forEach((element) => {
          thisobj.trialSttoptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  SaveCheckAct: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "SaveCheckAct",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.listQuery.title = "";
          thisobj.form.cpnid = "";
          thisobj.form.paytypeid = "";
          thisobj.form.paychannelid = "";
          thisobj.check_form.trialStt = "";
          thisobj.fetchData();
          thisobj.dialogcheckVisible = false;
          thisobj.dialogEditVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
          thisobj.listLoading = false;
        }
      },
      function (err) {}
    );
  },
  ElectProtocol: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "ElectProtocol",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
          thisobj.listLoading = false;
        }
      },
      function (err) {}
    );
  },
  DelCpnActCfgInfo: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "DelCpnActCfgInfo",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
        thisobj.listLoading = false;
      },
      function (err) {}
    );
  },
  EnableIsRc: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "EnableIsRc",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
        thisobj.listLoading = false;
      },
      function (err) {}
    );
  },
  DisableIsRc: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "DisableIsRc",
      params,
      "post",
      function (res) {
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
        thisobj.listLoading = false;
      },
      function (err) {}
    );
  },
};
</script>

<style lang="scss" scoped>
.red {
  color: red;
}

.green {
  color: green;
}

.notmes {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  /* line-height: 24px; */
  color: #959ea8;
  opacity: 1;
}

.steptwo_left {
  float: left;
  width: 45%;
  border-right: 1px solid #e6e6e6;
  margin-right: 20px;
  height: 400px;
  padding-left: 15px;
}

.steptwo_right {
  font-size: 14px;
  font-family: Source Han Sans CN;
  line-height: 30px;
  opacity: 1;
  height: 400px;
  float: left;
  width: 50%;
}

.steptwo_cpn {
  display: flex;
  justify-content: space-between;
  color: #409eff;
  font-size: 18px;
  font-weight: bold;
}

.steptwo_channel {
  display: flex;
  justify-content: space-between;
  color: #304156;
  font-size: 14px;
}

.steptwo_cfg {
  display: flex;
  justify-content: space-between;
  color: #304156;
  font-size: 14px;
  font-weight: bolder;
}

.steptwo_cfg_info {
  display: flex;
  justify-content: space-between;
  color: #304156;
  font-size: 14px;
}

.divinline {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
  opacity: 1;
}

.red_emy {
  background: #e8534e;
  opacity: 1;
  border-radius: 9px;
  color: white;
  display: inline-block;
  width: 43px;
  height: 21px;
  line-height: initial;
  text-align: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}

.green_emy {
  background: green;
  opacity: 1;
  border-radius: 9px;
  color: white;
  display: inline-block;
  width: 43px;
  height: 21px;
  line-height: initial;
  text-align: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}

.yulan {
  line-height: 30px;
  margin: 0px 200px;
  height: 400px;
  overflow-y: auto;
}

.commenttop {
  cursor: pointer;
}

::v-deep .el-table__fixed-right {
  background-color: #ffffff;
}

::v-deep .demo-form-inline .el-form-item--medium .el-form-item__content {
  width: 100%;
}

::v-deep
  .demo-form-inline
  .el-form-item--medium
  .el-form-item__content
  .el-textarea__inner {
  background-color: rgba(239, 239, 239);
}

.white {
  background-color: #409eff;
  color: #ffffff;
  text-align: center;
}

.el-icon-plus {
  font-size: 20px !important;
  color: #409eff;
  vertical-align: middle;
}

.el-icon-minus {
  font-size: 20px !important;
  color: #ff4040;
  vertical-align: middle;
  margin-left: 10px;
}
</style>
<style>
.cpnactinfo_dialog .el-dialog__body {
  overflow: hidden;
}

.cpnactinfo_dialog .el-dialog__header {
  padding: 0px;
  padding-bottom: 0px;
}

.steptwo_left .el-checkbox-button__inner {
  opacity: 1;
  border-radius: 18px !important;
  margin: 0px 10px 0px 0px;
}

.steptwo_left .el-radio-button__inner {
  opacity: 1;
  border-radius: 18px !important;
  margin: 0px 10px 0px 0px;
}

.steptwo_left .el-form--inline .el-form-item__content {
  margin-left: 5px;
}

.steptwo_left .el-switch.is-checked .el-switch__core::after {
  margin-left: -27px;
}

.steptwo_left .el-switch__core:after {
  width: 26px;
  height: 26px;
}

.steptwo_left .el-switch__core {
  height: 30px;
  border-radius: 18px;
}

/* .pay{
  background-color: royalblue;
} */
.el-form-item__label {
  text-align: left;
}

.config-info .el-form-item__label {
  text-align: center;
}

.msg {
  font-size: 16px !important;
}

.el-dialog__title {
  font-size: 18px !important;
}

.el-form-item--medium .el-form-item__content {
  width: 80%;
}

.config-info .el-form-item__label {
  text-align: left;
}

.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
  margin-right: 0px !important;
}

/* .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before{
    margin: 0px !important;
} */
</style>
